<template>
	<view class = "content">
		<view class="search-container"  @click="toSearchTopic">
			<fun-search-btn placeholder="搜索话题"></fun-search-btn>
		</view>
		
		<view class="slideshow-container">
			<swiper :indicator-dots="true" 
			:autoplay="true" 
			:interval="3000" 
			:duration="1000"
			:circular="true"
			indicator-active-color="#FFEB3B">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/testImg/desktop.jpg" mode="heightFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/testImg/11.jpg" mode="heightFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="block-line"></view>
		
		<view class="topic-classify-container">
			<fun-navigare @clickNavigate="clickNavigate(-1)" navigateName="话题分类"></fun-navigare>
			<view class="topic-classify">
				<block v-for="(item, index) in topicClassify" :key="index">
					<view class="topic-classify-item" :data-id="item.id" @click="toTopicMore(item.id)">{{item.classifyName}}</view>
				</block>
			</view>
		</view>
		
		<block v-for="(item, index) in topicClassifyData" :key="index">
			<view class="topic-container" v-if="(item.topicShareList ? item.topicShareList.data : []).length > 0">
				<fun-navigare @clickNavigate="clickNavigate(item.id)" :navigateName="item.classifyName"></fun-navigare>
				<view class="hot-topic">
					<block v-for="(topic, topicId) in item.topicShareList.data" :key="topicId">
						<fun-topic-item @clickTopicItem="clickTopicItem(topic.id)" :topic="topic"></fun-topic-item>
					</block>
				</view>
			</view>
		</block>
		
<!-- 		<view class="topic-container">
			<fun-navigare></fun-navigare>
			<view class="hot-topic">
				<fun-topic-item></fun-topic-item>
			</view>
		</view>
		
		<view class="topic-container">
			<fun-navigare></fun-navigare>
			<view class="hot-topic">
				<fun-topic-item ></fun-topic-item>
			</view>
		</view> -->
		
		
	</view>
</template>

<script>
	import funNavigare from '@/components/funNavigate/funNavigate.vue';
	import funTopicItem from '@/components/funTopicItem/funTopicItem.vue';
	import funSearchBtn from '@/components/funSearchBtn/funSearchBtn.vue';
	import {Topic} from '@/model/topic.js';
	export default {
		data() {
			return {
				topicClassify:[],
				topicClassifyData:[]
			};
		},
		components:{
			funNavigare,
			funTopicItem,
			funSearchBtn
		},
		onNavigationBarButtonTap(e){
			console.log(e.index)
			if(e.index == 0){
				// TODO 点击左侧按钮
				
				return
			}
			// 点击右侧按钮
			uni.navigateTo({
				url:"../topicPublished/topicPublished"
			})
		},
		onLoad() {
			this.getTopicClassify()
			this.getTopicClassifyData()
		},
		onShow() {
			uni.$on("topicDynamicNum",e=>{
				let classifyIndex = this.topicClassifyData.findIndex(item=> item.id == e.topicClassifyId)
				let dataIndex = this.topicClassifyData[classifyIndex].topicShareList.data.findIndex(item=> item.id = e.id)
				this.topicClassifyData[classifyIndex].topicShareList.data[dataIndex] = e
			})
		},
		methods:{
			clickTopicItem(id){
				uni.navigateTo({
					url:"../topicDetail/topicDetail",
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {id:id})
					}
				})
				console.log(id)
			},
			toSearchTopic(){
				console.log("打印")
				uni.navigateTo({
					url:"../searchTopic/searchTopic"
				})
			},
			clickNavigate(id){
				console.log(id)
				uni.navigateTo({
					url:"../topicMore/topicMore",
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {classifyId:id == -1 ? this.topicClassify[0].id : id})
					}
				})
			},
			toTopicMore(id){
				uni.navigateTo({
					url:"../topicMore/topicMore",
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {classifyId:id})
					}
				})
			},
			async getTopicClassify(){
				let res = await Topic.getTopicClassify()
				console.log(res)
				this.topicClassify = res.data.data
			},
			async getTopicClassifyData(){
				let res = await Topic.getTopicClassifyData()
				this.topicClassifyData = res.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.content{
		.slideshow-container{
			swiper{
				width: 720rpx;
				margin: 10rpx auto;
				height: 260rpx;
				box-shadow: 2rpx 2rpx 10rpx rgba(0,0,0,0.5);
				border-radius: 20rpx;
				overflow: hidden;
				.swiper-item{
					border-radius: 20rpx;
					overflow: hidden;
					height: 260rpx;
					image{
						max-width: 100%;
						max-width: 100%;
					}
				}
			}
		}
		.block-line{
			background-color: #EEEEEE;
			height: 4rpx;
			margin: 20rpx 10rpx;
		}
		.topic-classify-container{
			margin: 10rpx 20rpx;
			.topic-classify{
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 20rpx;
				.topic-classify-item{
					background-color: #F2F2F2;
					color: #888888;
					font-size: 24rpx;
					padding: 10rpx 30rpx;
					border-radius: 10rpx;
				}
			}
		}
		.topic-container{
			margin: 40rpx 20rpx;
			.hot-topic{
				margin-top: 20rpx;
			}
		}
	}
</style>
